import { SettingOutlined } from '@ant-design/icons';
// @ts-ignore
import { Button, Col, Descriptions, Image, Row } from 'antd';
// @ts-ignore
import React from 'react';

interface IProps {
  userData: API.UserInfoProps;
  setOpenForm: (open: boolean) => void;
}
const ProfileGrid: React.FC<IProps> = ({ setOpenForm, userData }) => {
  const showInformationForm = () => {
    setOpenForm(true);
  };
  return (
    <Row>
      <Col span={4}>
        <Image style={{ width: '40%' }} src={userData.user_picture} />
      </Col>
      <Col span={20}>
        <Row>
          <Descriptions
            title="用户信息"
            extra={
              <Button type={'text'} onClick={showInformationForm} icon={<SettingOutlined />} />
            }
          >
            <Descriptions.Item label="用户名">{userData.user_name}</Descriptions.Item>
            <Descriptions.Item label="密码">{userData.user_password}</Descriptions.Item>
            <Descriptions.Item label="身份">{userData.user_power}</Descriptions.Item>
          </Descriptions>
        </Row>
      </Col>
    </Row>
  );
};
export { ProfileGrid };
